<script>
export default {
  data() {
    return {
      searchValue: "", // 搜索框绑定的值
      fileList: [
        {
          name: "公文文件.docx",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/word.png",
        },
        {
          name: "公文文件.PPT",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/ppt.png",
        },
        {
          name: "公文文件.excel",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/excel.png",
        },
        {
          name: "公文文件.PNG",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/png.png",
        },
        {
          name: "公文文件.AVI",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/avi.png",
        },
        {
          name: "公文文件.PDF",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/PDF.png",
        },
        {
          name: "公文文件.ZIP",
          updateTime: "2023/4/23 10:11更新",
          icon: "/static/images/zip.png",
        },
      ],
    };
  },
  methods: {
    goBack() {
      // 返回上一页（UniApp 路由）
      uni.navigateBack();
    },
    handleFolderClick(name) {
      // 点击“全员共享文件夹”的逻辑（如跳转文件夹详情页）
      uni.showToast({ title: `点击了：${name}`, icon: "none" });
    },
    handleFileClick(name) {
      // 点击文件的逻辑（如打开文件预览）
      uni.showToast({ title: `点击了：${name}`, icon: "none" });
    },
  },
};
</script>
<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="navbar">-->
<!--      <view class="back-btn" @click="goBack">-->
        <!--        <text class="iconfont icon-back">返回</text>-->
<!--      </view>-->
      <!--      <view class="title">招宣资料</view>-->
      <!--      <view class="right-icons">-->
      <!--        <text class="iconfont icon-search">搜索</text>-->
      <!--        <text class="iconfont icon-more">更多</text>-->
      <!--      </view>-->
<!--    </view>-->

    <!-- 搜索区域 -->
    <view class="search-box">
      <input
          type="text"
          placeholder="请输入活动名称模糊查询"
          v-model="searchValue"
          class="search-input"
      />
    </view>

    <!-- 文件列表（用 scroll-view 实现滚动） -->
    <scroll-view class="file-list" scroll-y="true">
      <!-- 全员共享文件夹 -->
      <view class="file-item" @click="handleFolderClick('全员共享文件夹')">
        <image src="/static/folder.png" class="file-icon" />
        <view class="file-info">
          <text class="file-name">全员共享文件夹</text>
          <text class="file-time">2023/4/23 10:11更新</text>
        </view>
        <image src="/static/arrow-right.png" class="arrow-icon" />
      </view>

      <!-- 循环渲染文件列表（数据来自 data 中的 fileList） -->
      <view
          class="file-item"
          v-for="(file, index) in fileList"
          :key="index"
          @click="handleFileClick(file.name)"
      >
        <image :src="file.icon" class="file-icon" />
        <view class="file-info">
          <text class="file-name">{{ file.name }}</text>
          <text class="file-time">{{ file.updateTime }}</text>
        </view>
        <image src="/static/arrow-right.png" class="arrow-icon" />
      </view>
    </scroll-view>
  </view>
</template>


<style scoped>
.container {
  flex: 1;
  background-color: #F1F5FF;
  height: 100%;
  width: 100%;
}
/* 搜索框样式 */
.search-box {
  background-color: #fff;
  display: flex;
  justify-content: center;
margin: 0px 10px;
}
.search-input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;

}

/* 文件列表样式 */
.file-list {
  flex: 1;
  padding: 8px;
}
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}
.file-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.file-info {
  flex: 1;
}
.file-name {
  font-size: 16px;
  margin-bottom: 4px;
  display: block;
}
.file-time {
  font-size: 12px;
  color: #999;
}
.arrow-icon {
  width: 16px;
  height: 16px;
}
</style>